<template>
  <view class="bg-white rounded-[24rpx] shadow-sm overflow-hidden mb-4 hover:shadow-md transition-all duration-300">
    <view class="flex p-4">
      <!-- 左侧图片 -->
      <view class="relative w-[200rpx] h-[160rpx] rounded-[16rpx] overflow-hidden flex-shrink-0 mr-4">
        <image 
          :src="getImageList(item.pics)[0] || 'http://www.dzgktf.com/templets/default/images/wtyt.jpg'" 
          class="w-full h-full object-cover"
          mode="aspectFill"
          @click="previewImage(getImageList(item.pics)[0], getImageList(item.pics))"
        />
      </view>

      <!-- 右侧内容 -->
      <view class="flex-1 flex flex-col justify-between">
        <!-- 标题和描述 -->
        <view class="flex-1">
          <view class="mb-2">
            <text class="text-[28rpx] font-bold text-gray-900 line-clamp-2 leading-[1.4]">{{ item.title }}</text>
          </view>
          
          <view class="mb-3">
            <text class="text-[24rpx] text-gray-600 line-clamp-2 leading-[1.4]">{{ item.content }}</text>
          </view>

          <!-- 状态标签 -->
          <view class="mb-2">
            <view 
              class="inline-block px-2 py-1 rounded-[8rpx] text-[20rpx] font-medium"
              :class="getStatusClass(item.releaseStatus)"
            >
              {{ getStatusText(item.releaseStatus) }}
            </view>
          </view>
        </view>

        <!-- 底部信息 -->
        <view class="flex items-center justify-between">
          <!-- 发布时间 -->
          <!-- <view class="flex items-center">
            <text class="text-[20rpx] text-gray-400">{{ formatTime(item.publishTime || item.create_time) }}</text>
          </view> -->
        </view>
      </view>
    </view>

    <!-- 底部操作 -->
    <view
      class="flex items-center justify-end w-full border-box mt-[10rpx] px-[24rpx] pb-[20rpx] border-t border-[#f5f7fa] gap-[12rpx] flex-wrap"
    >
      <!-- 查看详情按钮 -->
      <nut-button
        size="small"
        type="success"
        @click.stop="handleViewDetails"
      >
        查看详情
      </nut-button>

      <!-- 编辑按钮 -->
      <nut-button
        size="small"
        type="default"
        @click.stop="handleEdit"
      >
        编辑
      </nut-button>

      <!-- 去支付 -->
      <nut-button
        v-if="item.pay_status == 0"
        size="small"
        type="warning"
        @click.stop="handlePay"
      >
        去支付
      </nut-button>

      <!-- 删除按钮 -->
      <nut-button
        size="small"
        type="danger"
        @click.stop="handleDelete"
        class=""
      >
        删除
      </nut-button>
    </view>

    <!-- 支付方式选择弹窗 -->
    <PaymentMethodModal 
      v-model="showPaymentModal" 
      :amount="parseFloat(props.item.release_fee || '0')"
      @confirm="handlePaymentConfirm"
      @cancel="handlePaymentCancel"
    />
  </view>
</template>

<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'
import { post } from '@/utils/request'
import PaymentMethodModal from '@/components/PaymentMethodModal.vue'
import { useUserStore } from '@/store/user'
import { ref } from 'vue'

/**
 * 项目展示组件
 * 用于显示用户发布的项目展示信息
 */

interface ProjectShowItem {
  id: number
  title: string
  content: string
  pics: string
  status: number
  rangeType: number
  create_time: string
  update_time: string
  publishTime: string
  statusClass: number,
  releaseStatus: number //1 待支付 2 审核中 3 审核通过 4 审核不过 5 已结束
  total_amount?: string | number // 支付金额
  pay_status?: number // 支付状态 0未支付 1已支付
}

interface Props {
  item: ProjectShowItem
}

interface Emits {
  (e: 'click', item: ProjectShowItem): void
  (e: 'viewDetails', item: ProjectShowItem): void
  (e: 'delete', item: ProjectShowItem): void
  (e: 'refresh'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 用户store
const userStore = useUserStore()

// 支付方式选择弹窗相关
const showPaymentModal = ref(false)

/**
 * 获取状态文本
 * @param status 状态值
 */
const getStatusText = (status: number) => {
  const statusMap = {
    // 1 待支付 2 审核中 3 审核通过 4 审核不过 5 已结束
    1: '待支付',
    2: '审核中',
    3: '审核通过',
    4: '审核不过',
    5: '已结束'
  }
  return statusMap[status] || '未知'
}

/**
 * 获取状态样式类
 * @param status 状态值
 */
const getStatusClass = (status: number) => {
  const classMap = {
    1: 'bg-orange-100 text-orange-600', // 待支付 - 橙色
    2: 'bg-blue-100 text-blue-600',     // 审核中 - 蓝色
    3: 'bg-green-100 text-green-600',   // 审核通过 - 绿色
    4: 'bg-red-100 text-red-600',       // 审核不过 - 红色
    5: 'bg-gray-100 text-gray-600'      // 已结束 - 灰色
  }
  return classMap[status] || 'bg-gray-100 text-gray-600'
}

/**
 * 获取范围类型文本
 * @param rangeType 范围类型
 */
const getRangeTypeText = (rangeType: number) => {
  const rangeMap = {
    0: '全国',
    1: '省级',
    2: '市级'
  }
  return rangeMap[rangeType] || '未知'
}

/**
 * 获取图片列表
 * @param pics 图片字符串，用逗号分隔
 */
const getImageList = (pics: string) => {
  if (!pics) return []
  return pics.split(',').filter(pic => pic.trim())
}

/**
 * 预览图片
 * @param current 当前图片
 * @param urls 所有图片列表
 */
const previewImage = (current: string, urls: string[]) => {
  Taro.previewImage({
    current,
    urls
  })
}

/**
 * 格式化时间
 * @param time 时间字符串
 */
const formatTime = (time: string) => {
  if (!time) return ''
  const date = new Date(time)
  return `${date.getMonth() + 1}/${date.getDate()}`
}

/**
 * 查看详情
 */
const handleViewDetails = () => {
  // emit('viewDetails', props.item)
  // 跳转到项目详情页面
  Taro.navigateTo({
    url: `/pages/project-show/preview?id=${props.item.id}`
  })
}

/**
 * 编辑项目
 */
const handleEdit = () => {
  // 跳转到编辑页面
  Taro.navigateTo({
    url: `/pages/project-show/edit?id=${props.item.id}`
  })
}

/**
 * 修改状态
 */
const handleUpdateStatus = async () => {
  try {
    const newStatus = props.item.status === 1 ? 2 : 1 // 上架/下架切换
    const statusText = newStatus === 1 ? '上架' : '下架'
    
    const res = await post('/groupTypes/updateStatus', {
      id: props.item.id,
      status: newStatus
    })
    
    if (res.code === 0) {
      Taro.showToast({
        title: `${statusText}成功`,
        icon: 'success',
        duration: 1500
      })
      // 触发刷新
      emit('refresh')
    } else {
      Taro.showToast({
        title: res.message || `${statusText}失败`,
        icon: 'none',
        duration: 2000
      })
    }
  } catch (error) {
    console.error('修改状态失败:', error)
    Taro.showToast({
      title: '操作失败，请重试',
      icon: 'error',
      duration: 2000
    })
  }
}

/**
 * 处理支付操作
 */
const handlePay = () => {
  showPaymentModal.value = true
}

/**
 * 处理支付方式确认
 * @param method 支付方式
 */
const handlePaymentConfirm = async (method: string) => {
  try {
    // 调用支付接口 - 项目展示支付
    console.log("props.item", props.item)
    const payRes = await post("/pay/groupTypes", {
      amount: props.item.release_fee || 1,
      projectId: props.item.id,
      vipType: 1,
      deductionBalance: method === 'balance' ? 1 : 0, // 余额支付传1，微信支付传0
    });


    console.log("项目展示支付结果 2 --->>>", payRes);

    if (payRes.code == 0) {
      if (method === 'wechat') {
        // 微信支付
        doPay(payRes.data);
      } else {
        if(payRes.data.code == 2){
        // 余额支付
        Taro.showToast({
          title: "支付成功！",
          icon: "success",
          duration: 2000,
        });
        // 更新用户余额
        const newBalance = (userStore.userInfo.balance || 0) - parseFloat(props.item.total_amount || '0');
        userStore.updateBalance(newBalance);
        // 刷新页面数据
        setTimeout(() => {
            emit('refresh');
          }, 2000);
        }
        else{
          Taro.showToast({
            title: payRes.data.msg || "支付失败",
            icon: "none",
            duration: 2000,
          });
        }
      }
    } else {
      Taro.showToast({
        title: payRes.message || "支付失败",
        icon: "error",
        duration: 2000,
      });
    }
  } catch (error) {
    console.error("支付失败:", error);
    Taro.showToast({
      title: "网络错误，请重试",
      icon: "error",
      duration: 2000,
    });
  }
};

/**
 * 处理支付取消
 */
const handlePaymentCancel = () => {
  // 阻止事件冒泡，避免触发父组件的点击事件
  showPaymentModal.value = false;
  Taro.showToast({
    title: "已取消支付",
    icon: "none",
  });
};

/**
 * 微信支付处理
 * @param param 支付参数
 */
const doPay = (param: any) => {
  window.WeixinJSBridge.invoke(
    "getBrandWCPayRequest",
    {
      appId: param.appid, //公众号ID，由商户传入
      timeStamp: param.timeStamp, //时间戳，自1970年以来的秒数
      nonceStr: param.nonceStr, //随机串
      package: param.prepayId,
      signType: "RSA", //微信签名方式：
      paySign: param.paySign, //微信签名
    },
    function (res: any) {
      console.log("微信支付结果 3 --->>>", res);
      if (res.err_msg === "get_brand_wcpay_request:ok") {
        // 使用以上方式判断前端返回,微信团队郑重提示：
        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠，商户需进一步调用后端查单确认支付结果。
        Taro.showToast({
          title: "支付成功！",
          icon: "success",
          duration: 2000,
        });
        // 刷新页面数据
        setTimeout(() => {
          emit('refresh');
        }, 2000);
      } else {
        Taro.showToast({
          title: "支付失败",
          icon: "error",
          duration: 2000,
        });
      }
    }
  );
};

/**
 * 删除项目
 */
const handleDelete = () => {
  Taro.showModal({
    title: '确认删除',
    content: '确定要删除这个项目吗？删除后无法恢复。',
    success: async (res) => {
      if (res.confirm) {
        try {
          const deleteRes = await post('/groupTypes/delete', {
            id: props.item.id,
          })
          
          if (deleteRes.code === 0) {
            Taro.showToast({
              title: '删除成功',
              icon: 'success',
              duration: 1500
            })
            // 触发刷新
            emit('refresh')
          } else {
            Taro.showToast({
              title: deleteRes.message || '删除失败',
              icon: 'none',
              duration: 2000
            })
          }
        } catch (error) {
          console.error('删除失败:', error)
          Taro.showToast({
            title: '删除失败，请重试',
            icon: 'error',
            duration: 2000
          })
        }
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.border-box{
  box-sizing: border-box;
}
</style>
